/* variables */

$color-key: #106FC4;
$color-element: #ddd;
$color-element-lt: lighten($color-element, 10%);
$color-element-dk: darken($color-element, 10%);
$color-highlight: #E8E8E8;
$color-background: #fff;

$color-header: #333;
$color-text: #666;
$color-code: #999;
$color-link: #106FC4;
$color-hover: #666;
$color-focus: #666;
$color-active: #333;

$color-odd: #F9F9F9;
$color-even: #E6F2F9;


$color-shadow: #333;
$color-border: darken($color-element, 10%);

$color-flash: #0ff;

$border-radius: 0.6em;

$font-header: Helvetica, Arial, Verdana, sans-serif;
$font-body: Helvetica, Arial, Verdana, sans-serif;
$font-code: "Courier New", courier, monospace;

/* mixins */

@mixin transition {
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

@mixin transition-fade {
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}

@mixin code {
	color: $color-code;
	font-family: $font-code;
}

@mixin background-gradient {
	background-color: $color-element;
	background-image: -moz-linear-gradient(top, $color-element-lt, $color-element-dk);
	background-image: -o-linear-gradient(top, $color-element-lt, $color-element-dk);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $color-element-lt), color-stop(1, $color-element-dk));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='$color-element-lt', EndColorStr='$color-element-dk')";
}
@mixin background-gradient-hover {
	background-color: darken($color-element, 10%);
	background-image: -moz-linear-gradient(top, darken($color-element-lt, 10%), darken($color-element-dk, 10%));
	background-image: -o-linear-gradient(top,  darken($color-element-lt, 10%), darken($color-element-dk, 10%));
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0,  darken($color-element-lt, 10%)), color-stop(1, darken($color-element-dk, 10%)));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='$ darken($color-element-lt, 10%)', EndColorStr='darken($color-element-dk, 10%)')";
}
@mixin background-gradient-active {
	background-color: darken($color-element, 20%);
	background-image: -moz-linear-gradient(top, darken($color-element-lt, 20%), darken($color-element-dk, 20%));
	background-image: -o-linear-gradient(top,  darken($color-element-lt, 20%), darken($color-element-dk, 20%));
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0,  darken($color-element-lt, 20%)), color-stop(1, darken($color-element-dk, 20%)));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='$ darken($color-element-lt, 20%)', EndColorStr='darken($color-element-dk, 20%)')";
}

@mixin text-emboss {
	text-shadow: 0 -1px 1px #fff;
}
@mixin text-shadow {
	text-shadow: 0 1px 1px #333;
}

@mixin drop-shadow {
	-webkit-box-shadow: rgba(0, 0, 0, 0.296875) 0px 1px 4px;
	-moz-box-shadow: rgba(0, 0, 0, 0.296875) 0px 1px 4px;
	-o-box-shadow: rgba(0, 0, 0, 0.296875) 0px 1px 4px;
	box-shadow: rgba(0, 0, 0, 0.296875) 0px 1px 4px;
}

@mixin border-image {
	border-width:14px;
	-webkit-border-image:url("../images/border.png") 25% repeat;
    -moz-border-image:url("../images/border.png") 25% repeat;
    -o-border-image:url("../images/border.png") 25% repeat;
    border-image:url("../images/border.png") 25% repeat;
}
